<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
			      margin: 0;
			      padding: 0;
			      box-sizing: border-box;
			      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			    }
			#navbar{
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				background:rgb(255, 255, 255);
				border-bottom:1px solid rgb(229, 231, 235) ;
				height: 64px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-shadow: 0 2px 10px rgba(0,0,0,0.05);
				padding: 0 2em;
			}
			.n1 span{
				font-size: 20px;
			}
			.nav-menu{
				margin: 0 2em;
			}
			.nav-menu ul{
				display: flex;
				list-style: none;
				gap: 28px;
			}
			.nav-menu a{
				text-decoration: none;
				color: #4b5563;
				font-size: 16px;
				padding: 8px 0;
				position: relative;
			}
			.n1{
				display: flex;
				gap: 10px;
				align-items: center;
			}
			
			.right-actions{
				display: flex;
				align-items: center;
				gap: 24px;
			}
			.notification-btn{
				position: relative;
				background: none;
				border: none;
				font-size: 20px;
				color: #4b5563;
				cursor: pointer;
			}
			.notification-btn:hover{
				color: red;
			}
			.user-info{
				display: flex;
				align-items: center;
				gap: 10px;
				cursor: pointer;
			}
			.user-name{
				font-size: 15px;
				
			}
			section h1 p{
				margin-left: 35px;
				font-size: clamp(1.5rem,3vw,2.5rem);
				font-weight: bold;
			}
			.main{
				padding-top: 5rem;
				padding-bottom: 2.5rem;
				height: 125rem;
			}
			.welcome-date-text{
				margin-top: 0.25em;
				font-size: 1rem;
			}
			.section2{
				display: flex;
				justify-content:space-between ;
				margin-top: 0.625rem;
			}
			.card{
				width: 18.9375rem;
				height: 10rem;
				box-shadow:0 2px 10px rgba(0,0,0,0.05) ;
				padding: 24px;
				background-color: #e5e7eb;
				border-radius: 0.625rem;
			}
			.main-div{
				padding: 1rem;
				margin: 0.625rem 3.75rem;
			}
				
			.card-content{
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				
			}
			
			.card2{
				 display: grid;
				 grid-template-columns: repeat(12, 1fr);
				 gap: 2rem;
			}
			.card-content2-left{
				grid-column: span 8;
			}
			.card-content2-right{
				grid-column: span 4;
			}
			.card-content2-left1{
				background-color: white;
				height: 25rem;
				border-radius: 0.625rem;
				border: 0.0625rem solid black;
				box-shadow:0 2px 10px rgba(0,0,0,0.05) ;
			}
			.card-content2-right1{
				background-color: white;
				height: 20rem;
				border-radius: 0.625rem;
				border: 0.0625rem solid black;
				box-shadow:0 2px 10px rgba(0,0,0,0.05) ;
			}
				
			.footer1{
				width: auto;
				height: 4.5rem;
				border-top: 0.0625rem solid black;
				
			}
			.footer2{
				height: 1.25rem;
				display: flex;
				justify-content:space-between ;
				/* align-items: center; */
				/* margin:auto 1.25rem ; */
			}
		</style>
	</head>
	<body>
	  <header id="navbar">
	  	<div class="n1">
			<div class="n1-logo">
				<img src="边牧.png" width="40px" >
			</div>
	  		<span>生活管理系统</span>
	  	</div>
		<nav class="nav-menu">
			<ul>
				<li><a href="#">仪表盘</a></li>
				<li><a href="#">日程管理</a></li>
				<li><a href="#">财务管理</a></li>
				<li><a href="#">健康记录</a></li>
				<li><a href="#">待办事项</a></li>
			</ul>
		</nav>
		
		<div class="right-actions">
		      <!-- 通知按钮 -->
		      <button class="notification-btn">
		        🔔
		        <span class="notification-badge">3</span>
		      </button>
		
		      <!-- 用户信息 -->
		      <div class="user-info">
		        <div class="user-image">U</div>
		        <span class="user-name">用户名</span>
		      </div>
		    </div>
	  </header>
	  <main class="main">
		  <div class="main-div">
		  	
		  
		 <section>
			 <h1>欢迎你，XXX</h1>
			 <p class="welcome-date-text">今天是<span id="current-date"></span>让我们开启愉快的一天</p>
		 </section>
		 
		 <section class="section2">
			 <div class="card">
			 	<div class="card-content">
			 		<div class="">
			 			<p style="margin-top: 0.5rem;">待办事项</p>
						<h3 style="margin-top: 0.5rem;">8 <span>/12</span></h3>
						<p style="margin-top: 0.5rem;">完成率 67%</p>
			 		</div>
					<div class="">
						ab
					</div>
			 	</div>
			 </div>
			 <div class="card">
			 	<div class="card-content">
			 		<div class="">
			 			<p style="margin-top: 0.5rem;">今日支出</p>
			 			<h3 style="margin-top: 0.5rem;">￥<span>248</span></h3>
			 			<p style="margin-top: 0.5rem;">较昨日 12%</p>
			 		</div>
			 		<div class="">
			 			ab
			 		</div>
			 	</div>
			 </div>
			 <div class="card">
			 	<div class="card-content">
			 		<div class="">
			 			<p style="margin-top: 0.5rem;">今日步数</p>
			 			<h3 style="margin-top: 0.5rem;">5632<span></span></h3>
			 			<p style="margin-top: 0.5rem;">目标 70%</p>
			 				</div>
			 		<div class="">
			 			ab
			 		</div>
			 	</div>
			 </div>
			 <div class="card">
			 	<div class="card-content">
			 		<div class="">
			 			<p style="margin-top: 0.5rem;">今日里程</p>
			 			<h3 style="margin-top: 0.5rem;">4 <span></span></h3>
			 			<p style="margin-top: 0.5rem;">下一个</p>
			 				 </div>
			 		<div class="">
			 			ab
			 		</div>
			 	</div>
			 </div>
		 </section>
		 
		 <div class="card2">
		 	<div class="card-content2-left">
		 		<div class="card-content2-left1">
		 			卡片一
		 		</div>
				<div class="card-content2-left1">
					卡片二
				</div>
		 	</div>
			<div class="card-content2-right">
				<div class="card-content2-right1">
					卡片一
				</div>
				<div class="card-content2-right1">
					卡片二
				</div>
				<div class="card-content2-right1">
					卡片三
				</div>
			</div>
			
		 </div>
		 </div>
		 
	  </main>
	  
	  <footer>
		  <div class="footer1">
		  	<div class="footer2">
		  		<div class="footer-left">
		  			<p>© 2023 生活管理系统. 保留所有权利.</p>
		  		</div>
				<div class="footer-right">
					<a href="#">帮助中心</a>
					<a href="#">隐私政策</a>
					<a href="#">使用条款</a>
				</div>
		  	</div>
		  </div>
	  </footer>
	</body>
	
</html>

